<template>
  <div>
    <div class="base_header" style="text-align: left;margin-bottom: 20px">
      <span style="font-size: 30px;font-weight: normal;">
        用户列表
      </span>
      <span style="font-size: 10px">网站用户管理</span>

    </div>
    <div>
      <el-collapse>
        <el-collapse-item  name="1">
          <template slot="title">
            <div style="padding: 20px;">
              <span style="font-size: 20px;font-weight: bold">
                功能面板
              </span>
              <span style="font-size: 14px;color: gray">
                (点击查看详情)
              </span>
            </div>
          </template>
          <div style="padding: 20px">
            <div class="el-col-20" style="">
              <el-form label-position="left" v-model="queryData">
                <el-col :span="6">
                <el-form-item label="角色">
                  <el-select v-model="queryData.roleId">
                    <el-option
                      label="全部"
                      :value="0">
                    </el-option>
                    <el-option
                      v-for="item in roleList"
                      :label="item.nickname"
                      :value="item.id"
                      :key="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="昵称">
                    <el-input type="text" v-model="queryData.nickname" style="width: auto"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="手机号">
                    <el-input type="text" v-model="queryData.phone" style="width: auto"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="邮箱">
                    <el-input type="text" v-model="queryData.email" style="width: auto"></el-input>
                  </el-form-item>
                </el-col>
              </el-form>
            </div>
            <div class="el-col-4" style="padding-left: 20px;border-left: 1px solid #f1f1f1;">
              <div>
                <el-button
                  type="primary"
                  @click="toGet"
                >查询
                </el-button>
                <!--<el-button type="success"
                           style="margin-left: 10px"
                           @click="dialogVisible = true"
                >新增</el-button>-->
              </div>
              <div>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div>
      <el-table
        :data="userList"
        style="width: 100%">
        <el-table-column
          label="序号"
          width="80">
          <template slot-scope="scope">
          <span>
            {{scope.$index + 1 +  (page - 1) * pageSize}}
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="昵称">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱">
        </el-table-column>

        <el-table-column
          prop="roleName"
          label="角色">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
              <el-popconfirm
                title="确定删除吗？"
              >
                <!-- @onConfirm="handleDelete(scope.$index, scope.row)" -->
                <el-button
                  size="mini"
                  slot="reference"
                  type="danger"
                >删除</el-button>
              </el-popconfirm>
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination" style="text-align: center">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :hide-on-single-page="true"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <el-drawer
      style="margin-top: 30px"
      title="用户编辑"
      :visible.sync="dialogVisible"
      :with-header="true">
      <div style="padding:0px 20px">
        <el-form v-model="userObj" label-position="left" label-width="100px">
          <el-form-item label="ID">
            <el-input v-model="userObj.userId"
                      :disabled="true">
            </el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="userObj.nickname" type="text">
            </el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="userObj.phone" type="text">
            </el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="userObj.email" type="text">
            </el-input>
          </el-form-item>
          <el-form-item label="头像">
            <el-popconfirm
              title="确定重置头像？"
              @onConfirm="toResetImage"
            >
              <el-button
                slot="reference"
                size="small"
                style="display: inline-block;float: right"
                plain
                type="warning"
              >重置头像
              </el-button>
            </el-popconfirm>
            <div style="display: inline-block;width: 100px;height: 100px">
              <el-image
                style="width: 100%; height: 100%"
                :src="userObj.imageUrl"
                fit="fill"></el-image>
            </div>
          </el-form-item>
          <el-form-item label="密码">
            <el-popconfirm
              title="确定重置密码？"
              @onConfirm="toResetPassword"
            >
              <el-button size="small"
                         slot="reference"
                         style="display: inline-block;float: right"
                         plain type="warning">重置密码
              </el-button>
            </el-popconfirm>
          </el-form-item>
          <el-form-item label="性别">
            <el-tag type="success" v-if="userObj.gender == 1">男</el-tag>
            <el-tag type="danger" v-if="userObj.gender == 2">女</el-tag>
            <el-tag type="info" v-if="userObj.gender == 0">未知</el-tag>
          </el-form-item>
          <el-form-item label="职业">
            <el-input v-model="userObj.office"
                      type="text"
                      :disabled="true">
            </el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input v-model="userObj.createTime"
                      type="text"
                      :disabled="true">
            </el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-checkbox-group
              v-model="userObj.roleIds"
              :min="1">
              <el-checkbox v-for="role in roleList"
                           :label="role.id"
                           :key="role.id"
                           :disabled="role.active === 0"
              >{{role.nickname}}</el-checkbox>
            </el-checkbox-group>
            <p style="margin: 2px;color: red">* 最少选择一个角色</p>
          </el-form-item>
        </el-form>
        <div style="text-align: right">
          <el-button type="success"  @click="updateUser">保存</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'UserList',
  data () {
    return {
      queryData: {
        roleId: 0
      },
      userList: [],
      roleList: [],
      page: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      userObj: {
        roleIds: []
      }
    }
  },
  mounted () {
    this.getAllRole()
    this.toGet()
  },
  methods: {
    // 下方分页点击
    handleCurrentChange (page) {
      this.page = page
      this.getListUser(page, this.pageSize)
    },
    getAllRole () {
      var _this = this
      this.$axios.post('/api/role/getAllRole')
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.roleList = JSON.parse(JSON.stringify(result.result))
          }
        })
    },

    getSizeUser () {
      var _this = this
      var queryData = JSON.parse(JSON.stringify(this.queryData))
      this.$axios.post('/api/user/getSizeUser',
        this.$qs.stringify({
          queryData: JSON.stringify(queryData)
        }))
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.total = result.result
          }
        })
    },
    getListUser (page, pageSize) {
      var _this = this
      var queryData = JSON.parse(JSON.stringify(this.queryData))
      queryData.page = page
      queryData.pageSize = pageSize
      this.$axios.post('/api/user/getListUser',
        this.$qs.stringify({
          queryData: JSON.stringify(queryData)
        }))
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.userList = result.result
          }
        })
    },
    handleEdit (index, row) {
      this.userObj = {}
      this.getDetailByUserId(row.userId)
    },
    toGet () {
      this.getSizeUser()
      this.getListUser(1, this.pageSize)
    },
    toResetImage () {
      this.userObj.imageUrl = 'http://cdn.404zz.cn/course/image/20200507233648FTHCVH.jpg'
    },
    getDetailByUserId (userId) {
      var _this = this
      this.$axios.post('/api/user/getDetailById',
        this.$qs.stringify({
          userId: userId
        }))
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.userObj = JSON.parse(JSON.stringify(result.result))
            _this.dialogVisible = true
          }
        })
    },
    toResetPassword () {
      var _this = this
      var newPassword = this.randomString(12)
      var userData = {}
      userData.userId = this.userObj.userId
      userData.password = newPassword
      this.$axios.post('/api/user/resetPassword',
        this.$qs.stringify({
          userData: JSON.stringify(userData)
        }))
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.$alert('密码已重置为：' + newPassword, '重置密码', {
              confirmButtonText: '确定',
              callback: action => {
              }
            })
          }
        })
    },
    updateUser () {
      var _this = this
      this.$axios.post('/api/role/updateUserRole',
        this.$qs.stringify({
          userData: JSON.stringify(this.userObj)
        }))
        .then(function (response) {
          var result = response.data
          if (result.isSuccess) {
            _this.$message({
              type: 'success',
              message: '更新成功',
              offset: 50
            })
            _this.dialogVisible = false
            _this.toGet()
          } else {
            _this.$message({
              type: 'errpr',
              message: '更新失败，请重试',
              offset: 50
            })
          }
        })
    },
    randomString (len) {
      len = len || 12
      var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
      // /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length
      var pwd = ''
      for (var i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    }
  }
}
</script>

<style scoped>

</style>
